<template>
  <div class="bc-filter-bar bc-filter-bar-simple">
    <div
      :class="['body',{close: !isExpand&&!isCloseCompleted},{'colse-completed':!isExpand&&isCloseCompleted}]"
      :style="{ 'max-height': height }"
    >
      <slot>请填入元素</slot>
    </div>
    <div class="footer">
      <slot name="footer">
        <div class="footer-wrapper">
          <e-button
            type="primary"
            @click="emitEvent('toSearch')">{{ searchText }}</e-button>
          <e-button
            style="margin-left: 10px"
            @click="emitEvent('toReset')">{{ resetText }}</e-button>
          <e-button
            v-if="showExpand"
            type="drop"
            @click="expandBody"
            :class="isExpand ? 'icon-btn rotate-icon' : 'icon-btn'">
            {{ !isExpand ? '展开' : '收起' }}
            <e-icon size="10" type="arrow-down"> </e-icon>
          </e-button>
          <div
            v-else
            style="display: inline-block; width: 10px;"></div>
        </div>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SimpleSearchPane',
  props: {
    title: {
      type: String,
      default: '筛选条件'
    },
    isCloseCompleted: {
      type: Boolean,
      default: false
    },
    closeHeight: {
      type: String,
      default: '11rem'
    },
    expandHeight: {
      type: String,
      default: '50rem'
    },
    searchText: {
      type: String,
      default: '查询'
    },
    resetText: {
      type: String,
      default: '重置'
    },
    showExpand: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isExpand: false // 控制折叠
    }
  },
  computed: {
    height () {
      return this.isExpand ? this.expandHeight : this.closeHeight
    }
  },
  methods: {
    expandBody () {
      this.isExpand = !this.isExpand
    },
    emitEvent (eventName) {
      this.$emit(eventName)
    }
  }
}
</script>
